<script setup>
import { useMapStore } from '@/stores/mapStore.js'
import MapTiles from '@/views/Map/components/MapTiles.vue'
import { ref } from 'vue';

const mapStore = useMapStore()
const mapContainer = ref(null);
// 天气切换
const toggleWeather = (type) => {
  mapStore.toggleWeatherEffect(type)
}

// 无人机控制
const startFlight = () => {
  mapStore.startDroneFlight(mapContainer.value);
}

//入侵监测
const startCar = () => {
  // console.log('startCar')
  mapStore.startCar(mapContainer.value);
}
// 清理所有
const clearAll = () => {
  mapStore.clearAllEffects()
}
</script>
<template>
  <div id="SwitchLayers">
    <el-dropdown placement="top-start">
      <el-button> 天气切换 </el-button>
      <template #dropdown>
        <el-dropdown-menu >
          <el-dropdown-item @click="toggleWeather('fog')">今日雾霾</el-dropdown-item>
          <el-dropdown-item @click="toggleWeather('rain')">今日降雨</el-dropdown-item>
          <el-dropdown-item @click="toggleWeather('snow')">今日有雪</el-dropdown-item>
          <el-dropdown-item @click="clearAll">清除效果</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="top-start">
      <el-button> 日常巡检 </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="startFlight">无人巡检</el-dropdown-item>
          <el-dropdown-item>风险评估</el-dropdown-item>
          <el-dropdown-item @click="startCar">入侵监测</el-dropdown-item>
          <el-dropdown-item @click="clearAll">清除效果</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <MapTiles  />
    <el-dropdown placement="top-start">
      <el-button> 测量工具 </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item >距离测量</el-dropdown-item>
          <el-dropdown-item >面积测量</el-dropdown-item>
          <el-dropdown-item >清除</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<style scoped lang="less">
#SwitchLayers {
  position: absolute;
  z-index: 1;
  bottom: 40px;
  //位置绝对定位居中
  left: 50%;
  transform: translateX(-50%); // 居中

  .el-button {
    background-color: #000;
    color: #4ADE80;
    border: 1px solid #4ADE80;
    border-radius: 4px;

    .el-dropdown-menu {
      background-color: #000;
      color: #4ADE80;
      border: 1px solid #4ADE80;
      border-radius: 4px;

      .el-dropdown-item {
        color: #4ADE80;
        font-size: 14px;
        padding: 0;
        height: 36px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
      }
        &:hover {
          background-color: #4ADE80;
          color: #000;
        }
    }
  }

  .el-button:hover {
    background-color: #4ADE80;
    color: #000;
    border: 1px solid #4ADE80;
  }

}
</style>
